<template>
  <van-search v-model="keywords" placeholder="搜索地点/景点/游记" />
  <van-grid :column-num="5">
    <van-grid-item
      icon="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/zijiayou.png"
      text="自驾游"
    />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262946d29ded1a8cb3e33e.png" text="自由行" />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262a34d29ded1a8cb4ae73.png" text="徒步" />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262a29d29ded1a8cb4a58b.png" text="亲子游" />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262990d29ded1a8cb42499.png" text="露营" />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262983d29ded1a8cb41b7f.png" text="结伴" />
    <van-grid-item icon="https://pic.imgdb.cn/item/67262966d29ded1a8cb4013f.png" text="购物" />
    <van-grid-item icon="https://pic.imgdb.cn/item/672629f1d29ded1a8cb476fb.png" text="摄影" />
    <van-grid-item icon="https://pic.imgdb.cn/item/672629e7d29ded1a8cb46dc9.png" text="人文" />
    <van-grid-item icon="https://pic.imgdb.cn/item/672629acd29ded1a8cb43cc0.png" text="省钱" />
  </van-grid>
  <!-- 推荐 -->
  <p class="recommend">推荐</p>
  <div class="Mainstream-view global-display global-a-items">
    <div class="Mainstream-left">
      <img
        class="Mainstream-left-image"
        src="@/assets\1.png"
        alt=""
      />
      <div class="Mainstream-bottom">
        <p class="m-title text-show">云南丽江</p>
        <div class="global-display global-a-items">
          <img v-for="item in recommendArr" :src="item.cover_image.url"
            src="https://img1.baidu.com/it/u=1018131434,3152648648&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
          />
          <p class="m-name">昵称：</p>
          <p class="m-name text-show dis-flex">我在丽江</p>
        </div>
      </div>
    </div>
    <div class="Mainstream-right global-display global-f-direction">
      <img
        src="@/assets\2.png"
      />
      <img
        src="@/assets\3.png"
      />
      <img
        src="@/assets\4.png"
      />
      <img
        src="@/assets\3.png"
      />
    </div>
  </div>

  <!-- 瀑布流 -->
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" offset="100" @load="onLoad">
    <card :userTravels="userTravels" />
  </van-list>
  

  <tabbar></tabbar>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import tabbar from "@/components/tabbar/index.vue";
import card from "@/components/cardFlow/index.vue";
import { useRouter } from "vue-router";

const $router = useRouter();
const keywords = ref("");
const userTravels = ref([]);
const loading = ref(false);
const finished = ref(false);

const load = () => {
  console.log("---正在加载---");
};
const toSearch = () =>{
  $router.push("/search")
}
</script>

<style>
.index-search {
  --van-search-content-background: #ffffff !important;
  --van-search-background: #f8f8f8 !important;
  --van-grid-item-content-background: #f8f8f8 !important;
  --van-grid-item-text-color: #7f7f7f !important;
}
.recommend {
  font-size: 17px;
  font-weight: bold;
  margin: 10px;
}
.Mainstream-view {
  margin: 10px;
  height: 200px;
  border-radius: 5px;
  background-color: #7d89b9;
  overflow: hidden;
}
.Mainstream-left {
  position: relative;
  flex: 1;
  height: 200px;
}
.Mainstream-left-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.Mainstream-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  padding: 0 0 10px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.Mainstream-bottom img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.m-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
.m-name {
  padding-left: 8px;
  font-size: 12px;
}
.dis-flex {
  flex: 1;
}
.Mainstream-right {
  gap: 8px;
  margin: 0 8px;
}
.Mainstream-right img {
  display: block;
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
}
.img_border {
  border: 2px solid yellow;
  box-sizing: border-box;
}
</style>
